<template>
  <div ref="boxwrap" class="CurrentProduct">
    <el-table
      :data="tableData"
      stripe
      size="small "
      :max-height="tbHeight"
      :header-cell-style="cellStyle"
      :cell-style="cellStyle"
    >
      <el-table-column
        prop="lineName"
        label="产线"
      />
      <el-table-column
        prop="partNum"
        label="料号"
      />
      <el-table-column
        prop="lotNum"
        label="工单"
      />
      <el-table-column
        prop="quantity"
        label="数量"
      />
    </el-table>
  </div>
</template>

<script>
// import { mapGetters } from 'vuex'
import { cutLineName } from '@/utils'
import { getLotnumsStatus } from '@/api/screen'
export default ({
  name: 'CurrentProduct',
  data() {
    return {
      tbHeight: null,
      cellStyle: { 'border-bottom-width': '0' },
      tableData: [],
      currentView: {},
      timer: null,
      refreshInterval: 1000 * 60
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  created() {
    // 获取vuex中当前制程、线别
    this.getCurrentView()
    if (this.$route.path.indexOf('/screen') !== -1) {
      this.dataRefresh()
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer)
      this.timer = null
    }
  },
  mounted() {
    this.setHeight()
  },
  methods: {
    setHeight() {
      this.tbHeight = this.$refs.boxwrap.clientHeight + 'px'
    },
    getCurrentView() {
      this.currentView = {
        regionid: this.$Cookies.get('currentReginid'),
        lineId: this.$Cookies.get('currentLineId')
      }
      this.getData()
    },
    getData() {
      getLotnumsStatus(this.currentView).then(response => {
        this.tableData = response.data.map(item => {
          item.lineName = cutLineName(item.lineName)
          return item
        })
      })
    },
    dataRefresh() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timer = setTimeout(() => {
        this.getData()
        this.dataRefresh()
      }, this.refreshInterval)
    }
  }
})
</script>

<style lang="scss">
.CurrentProduct{
  // table 底边
  .el-table::before {
    height: 0;
  }
}
</style>
